<template>
  <el-form ref="changePasswordForm" :model="changePasswordForm" :rules="changePasswordRules">

    <el-form-item prop="username">
      <el-input placeholder="用户名" prefix-icon="el-icon-user" v-model="changePasswordForm.username" clearable>
      </el-input>
    </el-form-item>

    <el-form-item prop="oldPassword">
      <el-input placeholder="旧密码" prefix-icon="el-icon-key" v-model="changePasswordForm.oldPassword" clearable show-password>
      </el-input>
    </el-form-item>

    <el-form-item prop="newPassword">
      <el-input placeholder="新密码" prefix-icon="el-icon-key" v-model="changePasswordForm.newPassword" clearable show-password>
      </el-input>
    </el-form-item>
    
    <el-form-item prop="confirmPassword">
      <el-input placeholder="确认密码" prefix-icon="el-icon-key" v-model="changePasswordForm.confirmPassword" clearable show-password>
      </el-input>
    </el-form-item>

    <el-row>
      <el-col :span="12"><el-button type="primary" round @click="confirm('changePasswordForm')">确认</el-button></el-col>
      <el-col :span="12"><el-button type="danger" round @click="reset('changePasswordForm')" style="margin-left:4px">重置</el-button></el-col>
    </el-row>
  </el-form>
</template>

<script>
import {
  changeUserPassword
} from '@/assets/request/api.js';
import tool from '@/assets/js/tool'
export default {
  name: "changePassword",
  mixins: [tool],
  data() {

    var checkNewPassword = (rule, value, callback) => {
      if(!this.changePasswordForm.newPassword){
        callback("请输入新密码")
      } else {
        callback()
      }
    };

    var checkConfirmPassword = (rule,value,callback) => {
      if(!this.changePasswordForm.confirmPassword){
        callback("请确认密码")
      } else {
        callback()
      }
    };

    return {
      
      changePasswordForm: {
        username: '',
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },

      changePasswordRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' }
        ],
        newPassword: [
          { validator: checkNewPassword, trigger: 'blur',required:true }
        ],
        confirmPassword: [
          { validator: checkConfirmPassword, trigger: 'blur',required:true }
        ]
      }
    }

  },
  methods: {
    confirm(formName) {
      this.$refs[formName].validate((valid) => {

        if (valid) {
          if(this.changePasswordForm.newPassword != this.changePasswordForm.confirmPassword) {
            this.$message({
              message: '两次密码不一致',
              type: 'error'
            });
            this.$refs[formName].resetFields();
          } else {
            this.finallyChangePassword()
          }
        } 
      });
    },
    reset(formName) {
      this.$refs[formName].resetFields();
    },
    finallyChangePassword() {

      // 修改密码
      this.changePasswordForm.oldPassword = this.rsaEncryptByPublicKey(this.changePasswordForm.oldPassword)
      this.changePasswordForm.newPassword = this.rsaEncryptByPublicKey(this.changePasswordForm.newPassword)
      this.changePasswordForm.confirmPassword = this.rsaEncryptByPublicKey(this.changePasswordForm.confirmPassword)
      changeUserPassword(this.changePasswordForm).then(res => {

        this.$message({
          message: '修改成功',
          type: 'success'
        });
        
        // 传递回去，提示需要修改密码
        this.$emit('changePassword',false)

      }).catch(err => {
        
        this.$message({
          message: err.message,
          type: 'error'
        });    
        this.$refs['changePasswordForm'].resetFields();
      })
      
    }
  },


  
}
</script>

<style scoped>
#imgCode{
  margin-top: 16px;
  margin-left: 5px;
}
.el-form-item{
  margin-bottom: 24px;
}

.v-modal {
  width: 0%;
  height: 0%;
}

</style>
